import React, {useState} from 'react';
import WallpaperObject from "../../components/WallpaperObject";
import {WallpaperListType} from "./page";
import {Flex, Pagination, Row, Col} from "antd";

interface WallpaperSectorProps {
    wallpapers: WallpaperListType;
    updatePage: (newPage: number) => void; // 声明接收 updatePage 函数
}
const WallpaperSector: React.FC<WallpaperSectorProps> = ({ wallpapers, updatePage }) => {

    const [currentPage, setCurrentPage] = useState<number>(wallpapers.currentPage);
    const [totalData, setTotalData] = useState<number>(wallpapers.total);
    const handlePageChange = (newPage: number) => {
        // 更新本地的 page 状态（不过好像没有什么必要）
        setCurrentPage(newPage);

        // 调用父组件暴露的 setPage 函数，以更新全局的 page 状态并触发重新渲染
        updatePage(newPage);
    };

    return (
        <Flex align={"center"} vertical style={{flex:"1"}} className={"wallpaper-sector"}>
            <div style={{ width: "100%" }}>
                {Array.from({ length: Math.ceil(wallpapers.list.length / 3) }, (_, rowIndex) => (
                    <Row key={rowIndex} gutter={[16, 16]}>
                        {Array.from({ length: 3 }, (_, colIndex) => {
                            const index = rowIndex * 3 + colIndex;
                            return index < wallpapers.list.length ? (
                                <Col key={colIndex} span={8}>
                                    <WallpaperObject wallpaper={wallpapers.list[index]} />
                                </Col>
                            ) : null;
                        })}
                    </Row>
                ))}
            </div>
            <Pagination simple onChange={handlePageChange} defaultPageSize={12} defaultCurrent={currentPage} total={totalData} style={{marginTop:"15px",marginBottom:"20px"}}/>
        </Flex>
    );
};
export default WallpaperSector;